<template>
<div class="poidetail-container">
    <div class="dynamic-widget-0 customerHead" style="height: 60px;">
        <div class="poidetail-widget-generalHead" style="height: 100%;">
            <div id="generalheader" class="generalHead-header clearfloat" style="height: 100%;">
                <div class="generalHead-left-header animation-common ">
                    <div class="generalHead-left-header-title"> 
                        <!-- :title="active_result_details.standard_name" -->
                        <span  class="clampword generalHead-titlename ">{{$store.state.Select_Xzqh_properties.standard_name}}</span> 
                    </div>
                </div>
                <!-- <div class="generalHead-right-header animation-common" style="display:none">
                    <div class="generalHead-right-route generalHead-right-route-to animation-common">
                        <span class="generalHead-right-route-text time-delay animation-common">*：{{$store.state.Select_Xzqh_properties.place_type}}</span> 
                    </div>
                    <div class="generalHead-right-route generalHead-right-route-to animation-common back_list" @click="backto1" title="返回查询列表">
                        <a-icon type="rollback" />
                    </div>
                </div> -->
            </div>
        </div>
    </div>
        <div class="dynamic-widget-container-0 customerOther" style="height: auto; max-height: 625px;width: 100%;">
            <div class="dynamic-widget-1 ">
                <div id="generalinfo" class="poidetail-widget-generalInfo bottom-split">
                    <div class="generalInfo-address-telnum">
                        <div class="generalInfo-address item"> 
                            <span class="generalInfo-pic generalInfo-address-icon"></span> 
                            <span class="generalInfo-address-text">{{$store.state.Select_Xzqh_properties.residence}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dynamic-widget-2 ">
                <div id="unifycontainer4" class="unifycontainer">
                    <div id="phoenix_dom_1_4" cardname="imagewall" class="phoenix-block phoenix-show"  v-show="($store.state.Select_Xzqh_properties.photos && $store.state.Select_Xzqh_properties.photos.length>0)">
                        <div class="card-box special8-box c-container">
                            <div class="special8-title-box c-flexbox BMap-log" data-logkey="imagewall.title">
                                <div class="c-title c-color">相册</div>
                                <div class="c-icon c-icon-arrowright"></div>
                            </div>
                            <div class="c-line-top"></div>
                            <div class="photo-list">
                                <ul class="photo-list-ul">
                                    <li class="photo-li " v-for="(item, index) in $store.state.Select_Xzqh_properties.photos" :key="index">
                                        <div :class="['photo','BMap-log','photo-street','showimg']" style="width: 76.5px;height: 58px;">
                                            <!-- :width="200" -->
                                            <!-- <a-image  style="width: 100%;height: 100%;" :src="Get_img(item)"/> -->
                                            <img :src="Get_img(item)" style="width: 100%;height: 100%;"/>
                                            <div class="demo-upload-list-cover" style="width: 100%;height: 100%;">
                                                <a-icon type="eye"  title="预览" @click.native="PicView(Get_img(item))"/>
                                            </div>
                                        </div>

                                    </li>
                                    <li class="photo-li photo-li-up">
                                        <div class="up-photo BMap-log">
                                            <!-- <div class="up-photo-box">
                                                <div class="icon"></div>
                                                <div class="des c-annotation c-color">上传图片</div>
                                            </div> -->
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div  cardname="businessTimeNew" class="phoenix-block phoenix-show" style="">
                        <div class="card-box text9-box c-container">
                            <div class="c-title title c-line-bottom" style="font-size: 13px;">罗马字母拼写</div>
                            <div class="cont-box">
                                <div class="content c-auxiliary">
                                    <div class="detail" style="font-size: 15px;">{{$store.state.Select_Xzqh_properties.roman_alphabet_spelling}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  cardname="businessTimeNew" class="phoenix-block phoenix-show" style="">
                        <div class="card-box text9-box c-container">
                            <div class="c-title title c-line-bottom" style="font-size: 13px;">少数民族语拼写</div>
                            <div class="cont-box">
                                <div class="content c-auxiliary details" style="font-family: MenkQaganTig;display: flex;">
                                    <div class="detail" style="font-size: 18px;transform: rotate(90deg);margin-left: -10px;" v-for="(item, index) in Get_ethnic($store.state.Select_Xzqh_properties.ethnic_minorities_writing)" :key="index">{{item}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  cardname="businessTimeNew" class="phoenix-block phoenix-show" style="">
                        <div class="card-box text9-box c-container">
                            <div class="c-title title c-line-bottom" style="font-size: 13px;">地名来历</div>
                            <div class="cont-box">
                                <div class="content c-auxiliary">
                                    <div class="detail" style="font-size: 15px;">{{$store.state.Select_Xzqh_properties.place_origin}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  cardname="businessTimeNew" class="phoenix-block phoenix-show" style="">
                        <div class="card-box text9-box c-container">
                            <div class="c-title title c-line-bottom" style="font-size: 13px;">地名含义</div>
                            <div class="cont-box">
                                <div class="content c-auxiliary">
                                    <div class="detail" style="font-size: 15px;">{{$store.state.Select_Xzqh_properties.place_meaning}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div  cardname="businessTimeNew" class="phoenix-block phoenix-show" style="">
                        <div class="card-box text9-box c-container">
                            <div class="c-title title c-line-bottom" style="font-size: 13px;">历史沿革</div>
                            <div class="cont-box">
                                <div class="content c-auxiliary">
                                    <div class="detail" style="font-size: 15px;">{{$store.state.Select_Xzqh_properties.place_history}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dynamic-widget-7 ">
                        <div class="error-page">        
                            <a class="forerror" href="http://dmfw.mca.gov.cn/" target="_blank"><span class="forerror_span"></span>我要报错 </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a-modal v-model="pic_visible" class="img_modal"   
        width="900px"
        :maskClosable="false"
        okText="确定"
        okType="dashed"
        :destroyOnClose="true"
        cancelText='取消'
        cancelokType="dashed"
        :footer="null"
        >
            <img  :src="pic_imgsrc" v-if="pic_visible" style="width: 100%">
        </a-modal>

        
</div>
</template>
<script>
// import Bus from '../../src/bus.js';
  export default {
    data() {
        return {
            pic_visible:false,
            pic_imgsrc:"",
        }
    },
    methods: {
        //地名属性信息页 返回至查询结果页
        backto1() {
            Bus.$emit('back_to',1);
            this.cardsid = 1
        },
        Get_img(value) {
            return `${window.Glod.baseUrl}pics/${value.path}`
        },
        // getgeneralInfo(){
        //     return `${this.active_result_details.province_name?this.active_result_details.province_name:''}${this.active_result_details.city_name?this.active_result_details.city_name:''}${this.active_result_details.area_name?this.active_result_details.area_name:''}`
        // },
        Get_ethnic(text){
            if(text){
                let text_split=text.split(' ');
                return text_split
            }else{
                return ['']
            }
        },
        PicView(_src){
            this.pic_imgsrc = _src;
            this.pic_visible = true;
        }
    }
  }
</script>
<style>
.showimg .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.showimg:hover .demo-upload-list-cover {
    display: block;
}
.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
    margin-top: calc(50% - 18px);
    margin-left: calc(50% - 10px);
}


.img_modal .ant-modal-close-x {
    display: block;
    width: 26px;
    height: 26px;
    font-size: 16px;
    font-style: normal;
    line-height: 26px;
    text-align: center;
    text-transform: none;
    text-rendering: auto;
}
.details:first-child{
    margin-left: 0px; 
}
</style>
